<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画实现轮播图</title>
  <link rel="stylesheet" href="./style/marquee.css">
</head>
<body>

  <div class="marquee">
    <div class="content">
      <div class="list"><img src="../images/31586acad609c18dd865e7.jpg" alt=""></div>
      <div class="list"><img src="../images/54447b06000171a002560191.jpg" alt=""></div>
      <div class="list"><img src="../images/animaiton_bg.png" alt=""></div>
    </div>
  </div>
  <button id="preBtn"><< pre</button> <button id="nextBtn"> next >></button>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
  $(()=>{
    console.log('页面元素加载完执行');
    //这里是一jquery操作DOM,修改CSS
    var outerWidth=300, 
        outerHeight=200,
        speed = 3,
        initIndex = 0,
        setTimeId = null,
        transitionTime =.3;
    var $marquee = $('.marquee');//最外层div
    var $content = $marquee.find('.content');
    var $list = $content.find('.list');
    var listLength = $list.length;
    var contentWidth = outerWidth*listLength;
    //4.通过jquery操作CSS
    var style = document.styleSheets;
    //Step1:最外层设置width
    $marquee.css({
      "width" : `${outerWidth}px`,
      "height" : `${outerHeight}px`
    });
    $list.css({
      "width" : `${outerWidth}px`,
      "height" : `${outerHeight}px`
    });
    //3.设置contentWidth
    $content.css({
      "width" : `${contentWidth}px`
    })
    var clone = $list.eq(0).clone();
    $content.append(clone);
    //4. 定时器
    function autoPlay(){
      setTimeId = setInterval(()=>{
        initIndex++;
        $content.css({
          "transition" : `transform ${transitionTime}s ease`,//transition实现一个过渡效果,这里就写transform
          "transform" : `translateX(-${outerWidth*initIndex}px)`
        })
        //initIndex reset
        initIndex === listLength ? initIndex=0 : ''; 
      },speed*1000) //3秒切换
    }
    //添加监听器,当过渡结束时去掉最后一帧过渡效果
    $content[0].addEventListener('transitionend',()=>{
      $content.css({
          "transition" : `none`,
          "transform" : `translateX(-${outerWidth*initIndex}px)`
        })
    })
    $('#preBtn').click(()=>{
      //initIndex--; 初始时等于0, initIndex--报错
      // initIndex === 0 ? initIndex=listLength : ''; 
      initIndex--;
      console.log(initIndex);
      console.log(outerWidth*initIndex);
      $content.css({
        "transition" : `transform ${transitionTime}s ease`,//transition实现一个过渡效果,这里就写transform
        "transform" : `translateX(-${outerWidth*initIndex}px)`
      })
      initIndex === 0 ? initIndex=listLength : '';
    })
    //直接写上面的代码在一次执行向左移动会有一bug, 当在第一副照片时,将向左移动前将translateX设置为这里的900
    //即第一副照片向左移动translateX的值变化由这里的900变成600 
    $('#preBtn').mouseenter(()=>{
      if(initIndex === 0){
        initIndex=listLength;
        console.log(outerWidth*initIndex);
        $content.css({
          "transition" : `none`,
          "transform" : `translateX(-${outerWidth*initIndex}px)`
        })
      }
    })
    $('#nextBtn').mouseenter(()=>{
      if(initIndex === listLength){
        initIndex = 0;
        $content.css({
          "transition" : `none`,
          "transform" : `translateX(-${outerWidth*initIndex}px)`
        })
      }
    })
    //向右
    $('#nextBtn').click(()=>{
        console.log(initIndex);
        initIndex === listLength ? initIndex=0 : ''; 
        initIndex++;
        $content.css({
          "transition" : `transform ${transitionTime}s ease`,//transition实现一个过渡效果,这里就写transform
          "transform" : `translateX(-${outerWidth*initIndex}px)`
        })
        //initIndex reset
        initIndex === listLength ? initIndex=0 : ''; 
    })

    })

</script>
</html>